<template>
  <div class="info">
	<!-- 导航栏 -->
    <van-nav-bar title="商品详情" left-text="" left-arrow  
	@click-left="onClickLeft">
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
	
    <!-- 主体内容 -->
	<img :src="infodata.goodsCoverImg" alt="" class="CoverImg">
	<h1>{{infodata.goodsName}}</h1>
	<p>免费邮 顺丰快递</p>
	<h2 class="sellp">￥{{infodata.sellingPrice}}</h2>
	<div v-html="infodata.goodsDetailContent"></div>

	
	<!-- 加入购物车 -->
	<van-goods-action>
	  <van-goods-action-icon icon="chat-o" text="客服" />
	  <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartnum" @click="goCart"/>
	  <van-goods-action-button type="warning" text="加入购物车" @click="add"/>
	  <van-goods-action-button type="danger" text="立即购买" />
	</van-goods-action>
	
  </div>
</template>

<script>
import { Toast } from 'vant';

export default {
  name: 'Info',
  data(){
	return {
		infodata:[]
	}  
  },
  created(){
	this.getdata();
	this.$store.dispatch("asyncCartList")
  },
  methods:{
	  getdata(){
		  this.$http.getInfoData(this.$route.params.gid).then(data=>{
			  console.log(data);
			  if(data.resultCode==200){
				  this.infodata=data.data;
			  }
		  }).catch(err=>{
			  console.log(err);
		  })
	  },
	  onClickLeft(){
		  this.$router.back();//返回上个页面
	  },
	  add(){
		  this.$http.addCart({goodsId:this.$route?.params?.gid,goodsCount:1}).then(data=>{
			  console.log(data);
			  if(data.resultCode==200){
				  Toast.success(data.message);
				  this.$store.dispatch("asyncCartList");
				  //重新调用一下获取数据的方法，重新计算
			  }else{
				  Toast.fail(data.message);
			  }
	
		  }).catch(err=>{
			  console.log(err);
		  })
	  },
	  goCart(){
		  this.$router.push("/cart");
	  }
  },
  computed:{
	  cartnum(){
		  return this.$store.getters.cartnum;
	  }
  }
}
</script>

<style scoped lang="less">
	.CoverImg{
		width:100%;
	}
	.sellp{
		color:red;
	}
</style>
